<!--
 * @Author: your name
 * @Date: 2021-08-31 20:48:32
 * @LastEditTime: 2021-09-03 22:05:12
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /custom-post-card/src/views/select.vue
-->
<template>
  <div class="container container_replace" v-cloak>
    <img
      src="https://dgut-teacher-postcard-1255644734.file.myqcloud.com/images/select-tips.png"
      class="tip"
      alt=""
    />
    <!-- 预览 -->
    <el-image
      :src="imageData[activeLocation][activePicIndex].url"
      fit="scale-down"
      style="max-width: 600px; width: 350px; height: 233px"
    >
      <template #placeholder>
        <div
          class="image-slot"
          style="
            max-width: 600px;
            width: 350px;
            height: 233px;
            line-height: 233px;
            background-color: transparent;
          "
        ></div>
      </template>
    </el-image>
    <!-- 单选框 -->
    <el-radio-group
      v-model="activeLocation"
      @change="activePicIndex = 0"
      fill="#a31a14"
    >
      <el-radio-button label="gc">莞城校区</el-radio-button>
      <el-radio-button label="ssh">松山湖校区</el-radio-button>
    </el-radio-group>
    <!-- 轮播图 -->
    <slider
      v-if="activeLocation == 'gc'"
      :image-list="imageData['gc']"
      @change-active="activePicIndex = $event"
    ></slider>
    <slider
      v-if="activeLocation == 'ssh'"
      :image-list="imageData['ssh']"
      @change-active="activePicIndex = $event"
    ></slider>
    <!-- 确认按钮 -->
    <el-button
      class="ballon"
      plain
      @click="
        $router.push({
          path: '/write',
          query: {
            postCardPicUrl: imageData[activeLocation][activePicIndex].url,
          },
        })
      "
    >
      <img
        src="https://dgut-teacher-postcard-1255644734.file.myqcloud.com/images/select-button.png"
        style="width: 80px"
        alt=""
      />
    </el-button>
  </div>
</template>

<script setup>
import { reactive, ref, defineComponent } from "vue";
//引入slider
import Slider from "comps/slider.vue";
defineComponent({ Slider: Slider });

//引入图片数据
import data from "data/index.js";
const imageData = reactive(data().imageData);
const location = reactive(data().Location);

//变量
const activeLocation = ref("gc"); //当前选择的校区  gc:莞城  ssh:松山湖
const activePicIndex = ref(0); //

const imageList = imageData[activeLocation.value];
</script>

<style scoped>
.container_replace {
  background-image: url("https://dgut-teacher-postcard-1255644734.file.myqcloud.com/images/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  justify-content: space-evenly;
}

.tip {
  width: 250px;
  margin-bottom: 20px;
}

.el-button,
.el-button.is-plain:focus,
.el-button.is-plain:hover,
.el-button.is-plain:active {
  background: none;
  border: none;
}
</style>
